<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app_pad">
    <h2>{{msg | padMsg}}</h2><br/>
    <h1>{{msg | padMsg}}</h1><br/>
    <h3>{{msg1 | padMsg }}</h3>

</div>

<script>
    new Vue({
        el: '#app_pad',
        data: {
            msg: '9',
            msg1: '12'
        },
        methods: {},
        filters: {
            padMsg(val) {
                //第一个参数表示最大补充到多长， 第二的参数表示用是什么字符补充。 padEnd为向后补充
                return val.padStart(2, '0');
            }
        }
    })
</script>
</body>
</html>